﻿﻿
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>华悦假日酒店 | 查询订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <link rel="icon" href="assets/img/favicon.jpg" sizes="32x32">
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link rel="stylesheet" href="../background/layuiadmin/style/admin.css">
    <link rel="stylesheet" href="../background/layuiadmin/style/login.css">

</head>
<body>
<div class="wrapper">
    <!-- header -->
    <header class="header">
        <div class="header-bottom">
            <nav class="navbar navbar-universal navbar-custom">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="logo">
                                <a href="/desk/welcome" class="navbar-brand page-scroll">
                                    <img width="143px" height="49px" src="/download/${info.icon}" alt="logo">
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="navbar-header">
                                <button type="button" data-toggle="collapse" data-target=".navbar-main-collapse"
                                        class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span
                                        class="icon-bar"></span><span class="icon-bar"></span><span
                                        class="icon-bar"></span></button>
                            </div>
                            <div class="collapse navbar-collapse navbar-main-collapse">
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a href="/desk/welcome">主页</a></li>
                                    <%--                                    <li><a href="/desk/reservation">房间预定</a></li>--%>
                                    <li><a href="javascript:;" style="color: #9CCC65">查询预定</a></li>
                                    <li><a href="/desk/about">关于我们</a></li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <!-- /header -->
    <!-- breadcrumbs -->
    <section class="breadcrumbs" style="background-image: url(assets/images/breadcrumbs/about.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1 class="h1">订单查询</h1>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb">
                        <li><a href="#">主页</a><i class="fa fa-angle-right"></i></li>
                        <li class="active">订单查询</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <!-- /breadcrumbs -->
    <!-- about -->
    <section class="about">
        <div class="container">
            <h2 class="h2">订单查询</h2>
            <div class="layui-col-md4 layui-col-md-offset4">
                <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-cellphone"
                               for="LAY-user-login-cellphone"></label>
                        <input type="text" name="cellphone" id="LAY-user-login-cellphone" lay-verify="required|phone"
                               placeholder="请输入预留手机号" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-row">
                            <div class="layui-col-xs12">
                                <div id="user-forget-slider"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <input type="hidden" id="LAY-Type" value="customer">
                        <div class="layui-row">
                            <div class="layui-col-xs7">
                                <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
                                       for="LAY-user-login-smscode"></label>
                                <input type="text" name="vercode" id="LAY-user-login-smscode" lay-verify="required"
                                       placeholder="短信验证码" class="layui-input">
                            </div>
                            <div class="layui-col-xs5">
                                <div style="margin-left: 10px;">
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid"
                                            id="user-getsmscode" onclick="getSMSCode()">获取验证码
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit
                                onclick="search()">查询订单
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /about -->
</div>
<!-- /footer -->
<!-- Scripts -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/layui/layui.js"></script>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script>
    // 验证手机号
    function isPhoneNo(phone) {
        var reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        return reg.test(phone);
    }

    // 验证验证码
    function isSmsCodeNo(code) {
        var res = /^\d{6}$/;
        return res.test(code);
    }

    function ToPost(phone) {
        document.write("<form action='/desk/findNowPredictOrder' method=post name=manageDepForm style='display:none'>");
        document.write("<input type=hidden name='phone' value='" + phone + "'/>");
        document.write("</form>");
        document.manageDepForm.submit();
    }

    var layer;
    var slider = null;
    layui.config({
        base: '../background/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'sliderVerify'], function () {
        var $ = layui.$
            , setter = layui.setter
            , form = layui.form
            , router = layui.router()
            , layer = layui.layer;
        //修饰验证条
        var sliderVerify = layui.sliderVerify,
            form = layui.form;
        slider = sliderVerify.render({
            elem: '#user-forget-slider'
        });
        form.render();
    });

    var countdown = 60;

    function settime(val) {
        if (countdown == 0) {
            val.classList.remove("layui-disabled");
            val.removeAttribute("disabled");
            val.innerHTML = "免费获取验证码";
            countdown = 60;
            return;
        } else {
            val.classList.add("layui-disabled");
            val.setAttribute("disabled", true);
            val.innerHTML = "重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function () {
            settime(val)
        }, 1000)
    }

    //获取验证码

    function getSMSCode() {
        var phone = $("#LAY-user-login-cellphone").val();
        if (phone == "") {
            return layer.msg('请输入手机号')
        }
        if (!isPhoneNo(phone)) {
            return layer.msg('请输入正确的手机号')
        }
        if (!slider.isOk()) {
            return layer.msg('请拖动滑块验证')
        }
        $.ajax({
            url: '/user/sendAuthCode'
            , data: {"phone": phone}
            , dataType: "json"
            , success: function (res) {
                layer.msg(res.msg, {icon: res.icon})

            }
        })
        var DISABLED = 'layui-disabled';
        settime($("#user-getsmscode")[0]);
    }

    //进行查询
    function search() {
        var phone = $("#LAY-user-login-cellphone").val();
        var smscode = $("#LAY-user-login-smscode").val();
        if (phone == "") {
            return layer.msg('请输入手机号')
        }
        if (!isPhoneNo(phone)) {
            return layer.msg('请输入正确的手机号')
        }
        if (!slider.isOk()) {
            return layer.msg('请拖动滑块验证')
        }
        if (smscode == "") {
            return layer.msg('请填写验证码')
        }
        if (!isSmsCodeNo(smscode)) {
            return layer.msg('请输入正确格式验证码')
        }
        var sendlayer02 = layer.load(1, {
            shade: [0.2, '#fff']
        });
        //请求接口
        $.ajax({
            url: '/user/findAuthCodeByUserInfo'
            , data: {
                "phone": phone,
                "authCode": smscode
            }
            , dataType: "json"
            , success: function (res) {
                layer.close(sendlayer02);
                if (res.status) {
                    var phoneN = $("#LAY-user-login-cellphone").val();
                    ToPost(phoneN);
                    // //验证成功，查询最新订单。
                } else {
                    layer.msg(res.msg, {icon: 2})
                }
            }
        });
    }
</script>
<!-- /Scripts -->
<
/body>
< /html>
